import { useState } from "react";
import { useNavigate } from "react-router";
import { NavLink } from 'react-router-dom';
import axios from 'axios';
import './login.scss';
export default function Login() {
    let navigate = useNavigate();
    let [uname,setUname] = useState('');
    let [red,setRed] = useState(false);
    let [blue,setBlue] = useState(false);
    let [password,setPassword] = useState('');
    let [unameBool,setUnameBool] =useState(true); // 默认不通过 false
    let [checkedValue,setCheckedValue] = useState(true)
        // uname的Input事件
    function unameChange(e) {
        // ？
        uname=e.target.value;
        setUname(uname)
      
    }
    // uname聚焦事件
    function unameFocus() {
        // 边框蓝色
        setBlue(true)

    }
    // uname 框的失焦事件
    function UnameBorder() {
        // 验证不符合规则 就变红框
        let regUname = /^[a-zA-Z]\w{5,19}$/;
        setUnameBool( regUname.test(uname) ); //  正则不通过 让 unameBool true  显示错误信息

    }
    function passwordChange(e) {
     
    }
    // 密码框聚焦事件
    function passwordFocus(){
 
    }
    // 密码框失焦事件
    function passwordBlur(){
     
    }
    function login(e) {
        e.preventDefault();
        // false
        console.log(unameBool);
        if (/^[a-zA-Z]\w{5,19}$/.test(uname)&&checkedValue) {
            axios.post('https://apipc-xiaotuxian-front.itheima.net/login', { account: uname, password: '123456' }).then(res => {
                if (res.data.msg == '操作成功') {

                    localStorage.setItem('userInfor', JSON.stringify(res.data.result))
                    localStorage.setItem('token', JSON.stringify(res.data.result.token))

                    navigate("/")
                }
            })
            .catch(res => {
                alert(res.response.data.message);
            })
        }
    }

    function checkHandler(e){
        setCheckedValue(e.target.checked)
    }
    return (
        <div id="LoginWrap">
            <header>
                <div className="container">
                    <h1><a href="">小兔鲜</a></h1>
                    <h3>欢迎登陆</h3>
                    <NavLink to="/"> 进入网站首页 </NavLink>
                </div>
            </header>
            <section>
                <div className="loginwrap">
                    <nav>
                        <a href=""> 账户登录</a>
                        <a href=""> 扫码登陆</a>
                    </nav>
                    <div className="account">
                        <div className="toggle">
                            <a href="">使用短信登录</a>
                        </div>
                        <form>
                            <div className="form_item">
                                <div className="inp">
                                    <i></i>
                                    <input type="text" placeholder="请输入用户名" value={uname} className={`${!unameBool ? 'red_border' : ''} ${blue ? 'blue_border' : ''}`} 
                                        onInput={unameChange}
                                        onFocus={unameFocus} 
                                        onBlur={UnameBorder} />
                                </div>
                                <div className="error">
                                    {/* 只要用户名为空 就提示  但是刚进入时，用户名为空不提示，  所有借用一下 false: !unameBool(true) */}
                                    {uname==''&& !unameBool&& <span >请输入用户名</span>}
                                    {/* 空  和非空的验证 */}
                                    {!unameBool && uname!==''&& <span >字母开头且6-20个字符</span>}


                                </div>
                            </div>
                            <div className="form_item">
                                <div className="inp">
                                    <i></i>
                                    <input type="password" placeholder="请输入密码" 
                                  />
                                </div>
                                {/* <div className="error">
                                    {span3 && <span>请输入密码</span>}
                                    {span4 && <span>密码6-24个字符</span>}
                                </div> */}
                            </div>
                            <div className="form_item">
                                <div className="agree">
                                    <input type="checkbox" checked={checkedValue} onChange={checkHandler} />
                                    <span>我已同意</span>
                                    <a href="">《隐私条款》</a>
                                    <span>和</span>
                                    <a href="">《服务条款》</a>
                                </div>
                                {!checkedValue && <div className="error"> 请勾选登录协议</div>}

                            </div>
                            <button className="btn" onClick={login}>登录</button>
                        </form>
                        <div className="action">
                            <a href="">
                                <img src="https://qzonestyle.gtimg.cn/qzone/vas/opensns/res/img/Connect_logo_7.png" alt="" />
                            </a>
                            <div>
                                <a href="">忘记密码</a>
                                <a href="">免费注册</a>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    )
}